<template>
	<n-space :size="5">
		<n-tag
			closable
			v-for="(item, index) in metaStore.getMetas()"
			:key="item.key"
			:type="item.key === metaStore.checkKey ? 'primary' : 'default'"
			@close="del(index)"
			@click="go(item.key)">
			{{item.title}}
		</n-tag>
	</n-space>
</template>

<script setup>
import { useMetaStore } from '@/stores'
import { computed } from 'vue'
import router from '@/router'
const metaStore = useMetaStore()
function del(index) {
	metaStore.del(index)
	if (metaStore.metas.length === 0) {
		window.location.href = '/'
		return
	}
	if (index >= metaStore.metas.length) {
		window.location.href = metaStore.metas[index - 1].key
	} else {
		window.location.href = metaStore.metas[index].key
	}
}
function go(path) {
	window.location.href = path
}
</script>

<style scoped lang="scss">
.n-tag {
	cursor: pointer;
	&:hover {
		color: #8fff9c;
	}
}
</style>